<template>
  <view class="page">
    <view class="nlist">
      <view class="nitem" v-for="item in content" :key="item.id" v-if="content.length > 0 ">
        <view class="oneitem">
          <!-- <image class="tous" src="/static/icon/icon_hy_yh.png" mode=""/> -->
          <text class="onename">{{ item.code }}</text>
          <!-- <view class="zixing">自行注册账号</view> -->
        </view>
        <view class="twoitem">
          <view class="hengone heng">
            <view class="hitem">
              <text class="hleft">所属门店：</text>
              <text class="hright txt">{{ item.cu_store_id_dictText || '--' }}</text>
            </view>
          </view>

          <view class="hengone heng">
            <view class="hitem">
              <text class="hleft">设备类型：</text>
              <text class="hright txt">{{ item.md_device_type_id_dictText || '--' }}</text>
            </view>
          </view>
          <view class="hengone heng">
            <view class="hitem">
              <text class="hleft">有效日期：</text>
              <text class="hright txt">{{ item.exp_date || '--' }}</text>
            </view>
          </view>
          <view class="anniu" @click="showRunner(item)">设备运行记录</view>
        </view>
      </view>
    </view>
    <!-- <view v-for="item in content" :key="item.id"  class="equip">
      <view class="equip_name">
        {{item.code}}
      </view>
      <view class="flex items-center">
        <view class="equip_lable">
          过期时间:
        </view>
        <view class="equip_value">
          {{item.exp_date}}
        </view>
      </view>
      <view class="flex items-center">
        <view class="equip_lable">
          device_type:
        </view>
        <view class="equip_value">
          {{item.md_device_type_id_dictText}}
        </view>
      </view>
      <view style="margin-top: 20rpx;">
        <wd-button  block hairline plain @click="showRunner(item)">设备运行记录</wd-button>
      </view>

    </view> -->

    <wd-pagination v-model="pagination.page" :total="pagination.total" @change="handleChange"/>
    <view class="empty" v-if="content.length == 0">
      <wd-status-tip image="content" tip="暂无设备"/>
    </view>
    <wd-message-box/>
  </view>
</template>

<script setup>
import {
  reactive,
  ref
} from "vue";
import {
  getEquipmentList,
  deleteDaily
} from "@/api/form.js"
import {useMessage} from '@/uni_modules/wot-design-uni'


import {
  onLoad,
  onShow,
  onPullDownRefresh
} from '@dcloudio/uni-app'

const message = useMessage()
const content = ref([])
const collapse = ref([])
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})


const fetchData = () => {
  getEquipmentList({
    hasQuery: true,
    column: "id",
    order: "asc",
    pageNo: pagination.page || 1,
    size: pagination.pageSize
  }).then(res => {
    uni.stopPullDownRefresh()
    collapse.value = [`${res.records[0].id}` || ""]
    pagination.total = res.total
    content.value = res.records || []
  })
}

onShow(() => {
  fetchData()
})


onPullDownRefresh(() => {
  pagination.page = 1
  fetchData()
})


const handleChange = (e) => {
  pagination.page = e.value
  fetchData()
}

const addFun = () => {
  uni.navigateTo({
    url: "/pages/form/daily_edit"
  })
}

const edit = (e) => {

  uni.navigateTo({
    url: `/pages/form/daily_edit?id=${e.id}`
  })
}

const remove = (e) => {
  message
      .confirm({
        msg: '确定删除吗？',
        title: '删除'
      })
      .then(() => {
        deleteDaily(e.id).then(res => {
          if (res) {
            uni.showToast({
              icon: "none",
              title: "删除成功"
            })
            fetchData()
          }
        })
      })
}

const showRunner = (e) => {
  uni.navigateTo({
    url: `/pages/equipment/runnner?id=${e.code}`
  })
}
</script>


<style lang="scss" scoped>
.page {
  background-color: #F3F3F3 !important;
}

.relative {
  position: relative;
}

.h-full {
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.btn {
  margin-top: 20rpx;
  width: 180rpx;
  margin-left: 80%;
}

.empty {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


.add_btn {
  position: fixed;
  bottom: 120rpx;
  right: 40rpx;
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  box-shadow: 0 0 12px 0 rgba(#1b1b1b, .2);
  color: #fff;
  background-color: #3775E9;
}

.equip {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 4px 0px #efefef;
  padding: 40rpx;
  color: #666;
  font-size: 13px;

  &_name {
    color: #333;
    font-size: 14px;
    margin-bottom: 20rpx;
  }

  &_lable {
    margin-right: 20rpx;
  }
}

// 新列表样式开始
.nlist {
  .nitem {
    margin: 0 20rpx 20rpx;
    background-color: #fff;
    // padding: 30rpx 0 30rpx 30rpx;
    display: flex;
    flex-direction: column;
    border-radius: 20rpx;

    .oneitem {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 30rpx 0rpx 0rpx 20rpx;
      position: relative;

      .tous {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
      }

      .onename {
        font-weight: bold;
        font-size: 30rpx;
        color: #1A1A1A;
        display: inline-block;
        margin-left: 10rpx;
      }

      .zixing {
        margin-left: auto;
        background: #EDF2FF;
        border-radius: 5rpx 0rpx 0rpx 5rpx;
        padding: 4rpx 20rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #6194FF;
      }
    }

    .twoitem {
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      background-color: rgba(244, 246, 249, 0.8);
      border-radius: 20rpx;
      margin: 30rpx;

      .hengone {
        display: flex;
        flex-direction: column;
        margin-bottom: 20rpx;
      }

      .hengone:last-child {
        margin-bottom: 0;
      }

      .heng {
        display: flex;
        flex-direction: row;
        align-items: center;

        .hitem {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex: 1;

          .hleft {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            width: 160rpx;
            margin-right: 10rpx;
            display: inline-block;
          }

          .hright {
            font-weight: 500;
            font-size: 28rpx;
            color: #1A1A1A;
            max-width: 73%;
            display: inline-block;
          }
        }

        .ban {
          width: 50%;
        }

        .ban:nth-child(even) {
          margin-left: auto;
        }
      }
    }
  }
}

// 新列表样式结束
.txt {
  overflow: hidden; //超出隐藏
  white-space: nowrap; //不折行
  text-overflow: ellipsis; //溢出显示省略号
}

.anniu {
  font-weight: 500;
  font-size: 28rpx;
  color: #F8F8F8;
  height: 80rpx;
  background: #4D81EF;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20rpx;
}
</style>
